<!--用户勋章-->
<template>
  <view>
    <view
      v-if="isOfficial"
      class="office-container"
    >
      官方
    </view>
    <view
      v-if="name"
      class="medal-wrap"
      @click.prevent="showMedalTip"
    >
      {{ name }}
    </view>
    <medalTipDialog
      v-model="showTip"
      :medal-info="medalInfo"
    ></medalTipDialog>
  </view>
</template>

<script>
import medalTipDialog from './medal-tip-dialog.vue';
import { getMedalDetail } from '@/api/pet-core.js';
export default {
  name: 'user-medal',
  components: {
    medalTipDialog,
  },
  props: {
    //勋章名称
    name: {
      type: String,
      value: '',
    },
    //勋章id
    benefitId: {
      type: String,
      value: '',
    },
    //是否官方
    isOfficial: {
      type: Boolean,
      value: false,
    },
  },
  data() {
    return {
      showTip: false,
      medalInfo: {},
    };
  },
  methods: {
    showMedalTip() {
      const that = this;
      getMedalDetail(this.name).then((res) => {
        if (res.code === 0) {
          that.medalInfo = res.data;
          that.showTip = true;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.office-container {
  background-color: $btn-primary-color;
  border-radius: 8rpx;
  padding: 4rpx 8rpx;
  margin-left: 18rpx;
  font-size: 20rpx;
  color: #333;
}
.medal-wrap {
  background-color: #ffe3f7;
  border-radius: 8rpx;
  padding: 4rpx 8rpx;
  margin-left: 18rpx;
  font-size: 20rpx;
  color: #ff98da;
}
</style>
